<template>
    <div class="container">
        <div class="container MuiPaper-elevation2-346 MuiPaper-rounded-343 ">
            <div class="handle-box">
                <div class="EnhancedTableToolbar-title-373">
                    <div>链码
                        <el-button class="mr10" type="primary"
                            @click="dialogChainCodeVisible = true,getAllPeerNodeRequest()">添加链码</el-button>
                        <el-button class="mr10" type="primary" @click="dialogUploadChainCodeVisible = true">上传链码
                        </el-button>
                    </div>
                </div>
            </div>
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
                <el-table-column prop="Name" label="链码名称"></el-table-column>
                <el-table-column prop="Path" label="路径" width="200"></el-table-column>
                <el-table-column prop="Lang" label="语言" width="200"></el-table-column>
                <el-table-column prop="Version" label="版本" width="200"></el-table-column>
                <el-table-column prop="PeerName" label="Peer节点"></el-table-column>
                <el-table-column prop="State" label="是否启用"></el-table-column>
                <el-table-column label="是否启用" align="center">
                    <template #default="scope">
                        <el-tag :type="
                            scope.row.State === '已启动'
                                ? 'success'
                                : scope.row.State === '未启动'
                                    ? 'danger'
                                    : ''
                        ">{{ scope.row.State }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template #default="scope">
                        <el-button type="primary" key="primary" @click="deleteChainCode(scope.$index)">删除</el-button>
                        <el-button type="primary" key="primary"
                            @click="getSearchChainCode(scope.$index), infoDialogVisible = true">详情</el-button>
                        <el-button type="primary" key="primary" @click="putNodeStart(scope.$index)">启用链码</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogChainCodeVisible" title="添加链码" width="30%">
            <el-form :model="newChainCodeData">
                <el-form-item label="链码名称*" :label-width="chainCodeFormLabelWidth">
                    <el-input v-model="newChainCodeData.Name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="路径*" :label-width="chainCodeFormLabelWidth">
                    <el-input type="text" v-model="newChainCodeData.Path" autocomplete="off" />
                </el-form-item>
                <el-form-item label="语言*" :label-width="chainCodeFormLabelWidth">
                    <el-input type="text" v-model="newChainCodeData.Lang" autocomplete="off" />
                </el-form-item>
                <el-form-item label="版本*" :label-width="chainCodeFormLabelWidth">
                    <el-input type="text" v-model="newChainCodeData.Version" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Peer节点" :label-width="chainCodeFormLabelWidth">
                    <el-select v-model="newChainCodeData.PeerName">
                        <el-option v-for="item in PeerNameOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="初始化语句" :label-width="chainCodeFormLabelWidth">
                    <el-input type="text" v-model="newChainCodeData.Init" autocomplete="off" />
                </el-form-item>
                <el-form-item label="调用语句" :label-width="chainCodeFormLabelWidth">
                    <el-input type="text" v-model="newChainCodeData.Invoke" autocomplete="off" />
                </el-form-item>
                <el-form-item label="查询语句" :label-width="chainCodeFormLabelWidth">
                    <el-input type="text" v-model="newChainCodeData.Query" autocomplete="off" />
                </el-form-item>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="postAddChainCode()">提交</el-button>
                    <el-button @click="dialogChainCodeVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="infoDialogVisible" width="40%">
            <el-descriptions title="查看链码" direction="horizontal" column="1" border>
                <el-descriptions-item label="链码名称*">{{ chainCodeInfo.Name }}</el-descriptions-item>
                <el-descriptions-item label="路径*">{{ chainCodeInfo.Path }}</el-descriptions-item>
                <el-descriptions-item label="语言*">{{ chainCodeInfo.Lang }}</el-descriptions-item>
                <el-descriptions-item label="版本*">{{ chainCodeInfo.Version }}</el-descriptions-item>
                <el-descriptions-item label="Peer节点">{{ chainCodeInfo.PeerName }}</el-descriptions-item>
                <el-descriptions-item label="初始化语句">{{ chainCodeInfo.Init }}</el-descriptions-item>
                <el-descriptions-item label="调用语句">{{ chainCodeInfo.Invoke }}</el-descriptions-item>
                <el-descriptions-item label="查询语句">{{ chainCodeInfo.Query }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
        <el-dialog v-model="dialogUploadChainCodeVisible" width="40%">
            <el-upload class="upload" drag action="http://localhost:21566"
                multiple>
                <el-icon class="el-icon--upload">
                    <upload-filled />
                </el-icon>
                <div class="el-upload__text">
                    Drop file here or <em>click to upload</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        请上传编译后链码文件
                    </div>
                </template>
            </el-upload>

        </el-dialog>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { UploadFilled } from '@element-plus/icons-vue'

const tableData = ref([]) as any;

const dialogChainCodeVisible = ref(false);           // 添加链码对话框

const infoDialogVisible = ref(false);                // 链码详细信息

const PeerNameOptions = ref([]) as any;              // PeerName选项

const chainCodeFormLabelWidth = '140px'              // 对话框宽度

const newChainCodeData = reactive({
    Name: '',
    Path: '',
    Lang: '',
    Version: '',
    PeerName: '',
    Init: '',
    Invoke: '',
    Query: ''
});

onMounted(() => {
    getChainCodes();
})
// 查询所有链码
const getChainCodes = () => {
    tableData.value = [];
    axios.get('prefix/api/entity/chaincodes', {
    }).then(function (response) {
        let length = response.data.chaincodes == null ? 0 : response.data.chaincodes.length;
        for (let i = 0; i < length; i++) {
            tableData.value.push({
                Name: response.data.chaincodes[i].Name,
                Path: response.data.chaincodes[i].Path,
                Lang: response.data.chaincodes[i].Lang,
                Version: response.data.chaincodes[i].Version,
                PeerName: response.data.chaincodes[i].PeerName,
                State: response.data.chaincodes[i].State == 'disable' ? '未启动' : '已启动'
            })
        }
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 查询所有peer节点
const getAllPeerNodeRequest = () => {
    PeerNameOptions.value = [];
    axios.get('prefix/api/entity/peers', {
    }).then(function (response) {
        let length = response.data.peers == null ? 0 : response.data.peers.length;
        for (let i = 0; i < length; i++) {
            PeerNameOptions.value.push({
                label: response.data.peers[i].Name,
                value: response.data.peers[i].Name
            })
        }
        console.log(response);
    }).catch(function (error) {
        ElMessage.error("查询链码失败!" + error);
        console.log(error);
    })
}

// 添加链码
const postAddChainCode = () => {
    axios.post('prefix/api/entity/chaincodes/' + newChainCodeData.Name + '.' + newChainCodeData.PeerName, {
        Name: newChainCodeData.Name,
        Path: newChainCodeData.Path,
        Lang: newChainCodeData.Lang,
        Version: newChainCodeData.Version,
        PeerName: newChainCodeData.PeerName,
        Init: newChainCodeData.Init,
        Invoke: newChainCodeData.Invoke,
        Query: newChainCodeData.Query
    }).then(function (response) {
        getChainCodes();
        dialogChainCodeVisible.value = false;
        // console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 查看链码
const chainCodeInfo = ref({
    Name: '',
    Path: '',
    Lang: '',
    Version: '',
    PeerName: '',
    Init: '',
    Invoke: '',
    Query: ''
});
const getSearchChainCode = (index) => {
    axios.get('prefix/api/entity/chaincodes/' + tableData.value[index].Name + '.' + tableData.value[index].PeerName, {
    }).then(function (response) {
        chainCodeInfo.value.Name = response.data.Name,
            chainCodeInfo.value.Path = response.data.Path,
            chainCodeInfo.value.Lang = response.data.Lang,
            chainCodeInfo.value.Version = response.data.Version,
            chainCodeInfo.value.PeerName = response.data.PeerName,
            chainCodeInfo.value.Init = response.data.Init,
            chainCodeInfo.value.Invoke = response.data.Invoke,
            chainCodeInfo.value.Query = response.data.Query
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 删除链码
const deleteChainCode = (index) => {
    axios.delete('prefix/api/entity/chaincodes/' + tableData.value[index].Name + '.' + tableData.value[index].PeerName, {
    }).then(function (response) {
        getChainCodes();
        ElMessage.success("删除链码成功!");
        console.log(response);
    }).catch(function (error) {
        ElMessage.error("删除链码失败!" + error);
        console.log(error);
    })
}

// 启动链码
const putNodeStart = (index) => {
    axios.put('prefix/api/entity/chaincodes/' + tableData.value[index].Name + '.' + tableData.value[index].PeerName + '/cmd', {
        Cmd: "NODE_START",
        NodeName: tableData.value[index].Name,
        Peer: tableData.value[index].PeerName
    }).then(function (response) {
        getChainCodes();
        if (response.data.state == 'running') {
            if (response.data.msg == 'node_already_run') {
                ElMessage.success("链码已经启动!");
            }
            else if (response.data.msg == 'ok') {
                ElMessage.success("链码启动成功!");
            }
        } else if (response.data.state == 'stop') {
            ElMessage.error("链码启动失败!" + response.data.msg);
        }
        console.log(response);
    }).catch(function (error) {
        ElMessage.error("启动链码失败!");
        console.log(error);
    })
}

const dialogUploadChainCodeVisible = ref(false);
</script>
  
<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.upload {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.mr10 {
    margin-right: 10px;
}

.EnhancedTableToolbar-title-373 {
    flex: 0 0 auto;
}

.handle-box {
    margin-bottom: 20px;
}

.MspTable-root-444 {
    margin-top: 24px;
}

.MuiPaper-elevation2-346 {
    box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 3px 1px -2px rgb(0 0 0 / 12%);
}

.MuiPaper-rounded-343 {
    border-radius: 4px;
}
</style>
  